<template>
    <div class="signup-page mx-auto p-3 w-330">
        <h5>注册账号</h5>
        <validate-form @form-submit="onFormSubmit">
            <div class="mb-3">
                <label class="form-lable">邮箱地址</label>
                <VaildateInput type="text" placeholder="请输入正确的邮箱地址" 
                v-model="formData.email" 
                :rules="emailRules"
                @value="emailValue">
                </VaildateInput>
            </div>
            <div class="mb-3">
                <label class="form-lable">昵称</label>
                <VaildateInput type="text" 
                placeholder="请输入昵称" v-model="formData.nickName" :rules="nameRules"
                @value="nameValue">
                </VaildateInput>
            </div>
            <div class="mb-3">
                <label class="form-lable">密码</label>
                <VaildateInput type="text" 
                placeholder="请输入密码" 
                v-model="formData.password" :rules="passwordRules"
                @value="passwordValue">
                </VaildateInput>
            </div>
            <div class="mb-3">
                <label class="form-lable">重复密码</label>
                <VaildateInput type="text" 
                placeholder="请输入再次输入" 
                v-model="formData.repeatPassword"
                :rules="repeatPasswordRules"
                @value="repeatPasswordValue">
                </VaildateInput>
            </div>
            <template #submit>
                <span type="submit" class="btn btn-danger">注册</span>
            </template>
        </validate-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import ValidateForm from '@/components/ValidateForm.vue';
import VaildateInput, { RulesProp } from '@/components/VaildateInput.vue';
import { useRouter } from "vue-router";
import createMessage from '@/hooks/createMessage';
import axios from 'axios';




export default defineComponent({
    components: {
        ValidateForm,
        VaildateInput
    },
    setup() {
        const router = useRouter()
        const formData = reactive({
            email: '',
            nickName: '',
            password: '',
            repeatPassword: ''
        })
        const emailValue = (val: string) => {
           formData.email = val
        }
        const nameValue = (val: string) => {
           formData.nickName = val
        }

        const passwordValue = (val: string) => {
            formData.password = val
        }
        const repeatPasswordValue = (val: string) => {
            formData.repeatPassword= val
        }


        const emailRules: RulesProp = [
            { type: 'required', message: '电子邮箱地址不能为空' },
            { type: 'email', message: '请输入正确的电子邮箱格式' },
        ]
        const nameRules: RulesProp = [
            { type: 'required', message: '昵称不能为空' }
        ]
        const passwordRules: RulesProp = [
            { type: 'required', message: '密码不能为空' }
        ]
        const repeatPasswordRules: RulesProp = [
            { type: 'required', message: '重复密码不能为空' },
            { type: 'custom', validator: () => formData.password === formData.repeatPassword , message: '密码不相同' }
        ]

        
        const onFormSubmit = (result: boolean) => {
            if (result) {
                const payload = {
                    email: formData.email,
                    nickName: formData.nickName,
                    password: formData.password
                }
                axios.post('/users', payload).then((data) => {
                    console.log(data);
                    createMessage('注册成功 正则跳转登录界面', 'success')
                    setTimeout(() => {
                        router.push('/login')
                    }, 2000)
                }).catch((e) => {
                    console.log(e);
                })
            }
        }
        return {
            formData,
            emailRules,
            nameRules,
            passwordRules,
            repeatPasswordRules,
            onFormSubmit,
            emailValue,
            nameValue,
            passwordValue,
            repeatPasswordValue
        }
    }
})
</script>

<style scoped>
.w-330 {
    max-width: 330px;
}
</style>